import React from 'react';
import echarts from 'echarts';
import moment from 'moment';
import _ from 'lodash';
import ReactEChart from './ReactEChart';
import dicts from '../dicts';

const getConfig = ({ title, serieName, data, markPointData, klineType }) => {
	const serieData = [];
  const serieLineData = [];
	const volumes = [];
	const volumesLine = [];
	const dates = [];
	const dataLength = data.length;
	const dateFormat = dicts.klineDateFormat[klineType];

	for (let i = 0; i < dataLength; i += 1) {
		dates.push(moment(data[i][0], 'YYYYMMDDHHmmss').format(dateFormat));

		serieData.push([
			data[i][1],//open
			data[i][2],//close
			data[i][3],//low
			data[i][4],//high
		]);

		volumes.push(
			[i, data[i][5], data[i][2] > data[i][1] ? -1 : 1],
		);
    if (klineType === 'tick' && i !== 0) {
      serieLineData.push(
        data[i][1],//LastPx
      );
      volumesLine.push(
        [i, data[i][3] - data[i - 1][3], data[i][1] > data[i - 1][1] ? -1 : 1],
      );
    }
	}

	const colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];

  const chartOptions = {
		color: colorList,
		title: {
			left: 'center',
			text: title,
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
			},
			backgroundColor: 'rgba(245, 245, 245, 0.8)',
			borderWidth: 1,
			borderColor: '#ccc',
			padding: 10,
			textStyle: {
				color: '#000',
			},
			position: (pos, params, el, elRect, size) => {
				const obj = { top: 10 };
				obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
				return obj;
			},
		},
		axisPointer: {
			link: { xAxisIndex: 'all' },
			label: {
				backgroundColor: '#777',
			},
		},
		visualMap: {
			show: false,
			seriesIndex: 1,
			dimension: 2,
			pieces: [{
				value: 1,
				color: 'green',
			}, {
				value: -1,
				color: 'red',
			}],
		},
		dataZoom: [
			{
				type: 'inside',
				xAxisIndex: [0, 1],
				start: 0,
				end: 100,
			},
			{
				show: true,
				type: 'slider',
				y: '90%',
				start: 0,
				end: 100,
			},
		],
		xAxis: [{
			type: 'category',
			data: dates,
			boundaryGap: false,
			axisLine: { lineStyle: { color: '#777' } },
			axisLabel: {
				formatter: value => {
					let text = ''
					let values = value.split(' ');
					text = values.length === 2 ? `${values[0]}\n${values[1]}` : value;
					return text;
				},
				lineHeight: 10,
				fontSize: 10,
			},
			min: 'dataMin',
			max: 'dataMax',
			axisPointer: {
				show: true,
			},
		}, {
			type: 'category',
			gridIndex: 1,
			data: dates,
			scale: true,
			boundaryGap: false,
			splitLine: { show: false },
			axisLabel: { show: false },
			axisTick: { show: false },
			axisLine: { lineStyle: { color: '#777' } },
			splitNumber: 20,
			min: 'dataMin',
			max: 'dataMax',
		}],
		yAxis: [{
			scale: true,
			splitNumber: 2,
			axisLine: { lineStyle: { color: '#777' } },
			splitLine: { show: true },
			axisTick: { show: false },
			axisLabel: {
				inside: true,
				formatter: '{value}\n',
			},
		}, {
			scale: true,
			gridIndex: 1,
			splitNumber: 2,
			axisLabel: { show: false },
			axisLine: { show: false },
			axisTick: { show: false },
			splitLine: { show: false },
		}],
		grid: [{
			left: 40,
			right: 20,
			top: 30,
			height: 160,
		}, {
			left: 40,
			right: 20,
			height: 50,
			top: 220,
		}],
		series: [{
			type: klineType === 'tick' ? 'line' : 'candlestick',
			name: serieName,
			data: klineType === 'tick' ? serieLineData : serieData,
			markPoint: {
				data: markPointData,
			},
			itemStyle: {
				normal: {
					color: '#ef232a',
					color0: '#14b143',
					borderColor: '#ef232a',
					borderColor0: '#14b143',
				},
				emphasis: {
					color: '#108ee9',
					color0: '#108ee9',
					borderColor: '#108ee9',
					borderColor0: '#108ee9',
				},
			},
		}, {
			name: 'Volume',
			type: 'bar',
			xAxisIndex: 1,
			yAxisIndex: 1,
			itemStyle: {
				normal: {
					color: '#7fbe9e',
				},
				emphasis: {
					color: '#108ee9',
				},
			},
			data: klineType === 'tick' ? volumesLine : volumes,
		}],
	};
  if (klineType === 'tick') {
    chartOptions.tooltip.formatter = (params, ticket, callback) => {
      console.log(params);
      const dataIndex = params[1].data[0];
      const sourceData = data[dataIndex];
      let result = `${params[0].axisValueLabel}`;
      result += `<br />${params[0].marker}成交价：${params[0].data}`;
      result += `<br />${params[1].marker}成交量：${params[1].data[1]}`;
      result += `<br /><br />`;
      result += `<table>`;
      result += `<tr><td>卖5: ${_.has(sourceData, 22) ? sourceData[22] : ''}, ${_.has(sourceData, 23) ? sourceData[23] : ''}</td>`;
      result += `<td>&nbsp;&nbsp;买5: ${_.has(sourceData, 20) ? sourceData[20] : ''}, ${_.has(sourceData, 21) ? sourceData[21] : ''}</td></tr>`;
      result += `<tr><td>卖4: ${_.has(sourceData, 18) ? sourceData[18] : ''}, ${_.has(sourceData, 19) ? sourceData[19] : ''}</td>`;
      result += `<td>&nbsp;&nbsp;买4: ${_.has(sourceData, 16) ? sourceData[16] : ''}, ${_.has(sourceData, 17) ? sourceData[17] : ''}</td></tr>`;
      result += `<tr><td>卖3: ${_.has(sourceData, 14) ? sourceData[14] : ''}, ${_.has(sourceData, 15) ? sourceData[15] : ''}</td>`;
      result += `<td>&nbsp;&nbsp;买3: ${_.has(sourceData, 12) ? sourceData[12] : ''}, ${_.has(sourceData, 13) ? sourceData[13] : ''}</td></tr>`;
      result += `<tr><td>卖2: ${_.has(sourceData, 10) ? sourceData[10] : ''}, ${_.has(sourceData, 11) ? sourceData[11] : ''}</td>`;
      result += `<td>&nbsp;&nbsp;买2: ${_.has(sourceData, 8) ? sourceData[8] : ''}, ${_.has(sourceData, 9) ? sourceData[9] : ''}</td></tr>`;
      result += `<tr><td>卖1: ${_.has(sourceData, 6) ? sourceData[6] : ''}, ${_.has(sourceData, 7) ? sourceData[7] : ''}</td>`;
      result += `<td>&nbsp;&nbsp;买1: ${_.has(sourceData, 4) ? sourceData[4] : ''}, ${_.has(sourceData, 5) ? sourceData[5] : ''}</td></tr>`;
      result += `</table>`;
      return result;
    }
  }
  return chartOptions;
};

const KlineChart = (props) => {
	const config = getConfig(props);
	return (
		<div style={{ height: 310 }}>
			<ReactEChart config={config} />
		</div>
	);
};

KlineChart.propTypes = {};

export default KlineChart;
